diff --git a/src/webui/links.ts b/src/webui/links.ts
index 3ab11a7..c29bbae 100644
--- a/src/webui/links.ts
+++ b/src/webui/links.ts
@@ -1,84 +1,84 @@
 import type { AstroIntegration, AstroConfig } from 'astro';
 import { writeFileSync, readFileSync } from 'fs';
 import { globSync } from 'glob';
 import path from 'path';
 import { fileURLToPath } from 'url';
 
 export function leadingTrailingSlash(base?: string) {
 	return base?.replace(/^\/*([^\/]+)(.*)([^\/]+)\/*$/, '/$1$2$3/') || '/';
 }
 
 export function replaceHTML({ outDirPath, filePath, base, html }: { outDirPath: string; filePath: string; base: string; html: string }) {
 	const pattern = new RegExp(
 		`(?<=<[^>]+\\s((href|src(set)?|poster|content|component-url|renderer-url)=["']?([^"']*,)?|style=("[^"]*|'[^']*|[^\\s]*)url\\(\\s*?["']?)\\s*?)${base}(?!\/)`,
 		'gm'
 	);
 
-	const relativePath = path.relative(path.dirname(filePath), outDirPath).split(path.sep).join(path.posix.sep) || '.';
+	const relativePath = path.relative(path.dirname(filePath), outDirPath).split(path.sep).join(path.posix.sep) || '{{base_path | safe}}';
 
 	return html.replace(pattern, `${relativePath}/`);
 }
 
 export function replaceCSS({ outDirPath, filePath, base, css }: { outDirPath: string; filePath: string; base: string; css: string }) {
 	const pattern = new RegExp(`(?<=url\\(\\s*?["']?\\s*?)${base}(?!\/)`, 'gm');
 
-	const relativePath = path.relative(path.dirname(filePath), outDirPath).split(path.sep).join(path.posix.sep) || '.';
+	const relativePath = path.relative(path.dirname(filePath), outDirPath).split(path.sep).join(path.posix.sep) || '{{base_path | safe}}';
 
 	return css.replace(pattern, `${relativePath}/`);
 }
 
 function relativeLinks({ config }: { config?: AstroConfig }): AstroIntegration {
 	const base = leadingTrailingSlash(config?.base);
 
 	return {
 		name: 'relative-links',
 		hooks: {
 			'astro:build:done': async ({ dir }) => {
 				const outDirPath = fileURLToPath(dir);
 
 				try {
 					globSync(`${outDirPath}**/*.html`).forEach((filePath) => {
 						writeFileSync(
 							filePath,
 							replaceHTML({
 								outDirPath,
 								filePath,
 								base,
 								html: readFileSync(filePath, 'utf8'),
 							}),
 							'utf8'
 						);
 					});
 
 					globSync(`${outDirPath}**/*.css`).forEach((filePath) => {
 						writeFileSync(
 							filePath,
 							replaceCSS({
 								outDirPath,
 								filePath,
 								base,
 								css: readFileSync(filePath, 'utf8'),
 							}),
 							'utf8'
 						);
 					});
 				} catch (error) {
 					console.log(error);
 				}
 			},
 		},
 	};
 }
 
 export default function (): AstroIntegration {
 	return {
 		name: 'relative-links',
 		hooks: {
 			'astro:config:setup': ({ config, updateConfig }) => {
 				updateConfig({
 					integrations: [relativeLinks({ config })],
 				});
 			},
 		},
 	};
 }
diff --git a/src/webui/src/components/base.astro b/src/webui/src/components/base.astro
index a2f5a0a..51188c6 100644
--- a/src/webui/src/components/base.astro
+++ b/src/webui/src/components/base.astro
@@ -1,67 +1,60 @@
 ---
 import '@/styles.css'
 import favicon from '@/public/favicon.svg?url'
 import banner from '@/public/banner.png?url'
 
 interface Props {
 	title: string;
 	description: string;
 	image?: string;
 }
 
 const { title, description } = Astro.props;
 ---
 
-<base href="{{base_path | safe}}/" />
-<app-redirect data-base={"{{base_path | safe}}"} />
-
-<!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-<link rel="icon" type="image/svg+xml" href={favicon} />
-<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
 <meta name="generator" content={Astro.generator} />
 
-<!-- Primary Meta Tags -->
 <title>{title}</title>
+<link rel="icon" type="image/svg+xml" href={favicon} />
+<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+<app-redirect data-base={"{{base_path | safe}}"} />
+
 <meta name="title" content={title} />
 <meta name="description" content={description} />
-
-<!-- Open Graph / Facebook -->
 <meta property="og:type" content="website" />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
 <meta property="og:image" content={banner} />
-
-<!-- Twitter -->
 <meta property="twitter:card" content="summary_large_image" />
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={banner} />
 
 <script>
   import { $settings } from '@/store';
 
   class AppRedirect extends HTMLElement {
 	 constructor() {
 		super();
 
 		const base = this.dataset.base;
 		fetch(base + '/metrics', {
 			headers: { Authorization: 'token ' + $settings.get().token },
 		}).then(response => {
 			if (window.location.pathname.includes("login")) {
 				if (response.status === 200) {
 					window.location.href = base + "/";
 				}
 			} else {
 				if (response.status !== 200) {
 					window.location.href = base + '/login';
 				}
 			}
 		});
 	 }
   }
 
   customElements.define('app-redirect', AppRedirect);
 </script>